
<template>
	<view class="profile-page">
		<!-- 顶部导航 -->
		<view class="header-bar">
			<text @click="sheep.$router.back()" class="back-icon">←</text>
			<text class="title">设置</text>
		</view>

		<!-- 功能列表 -->
		<view class="menu-list">
			<view class="menu-item" v-for="item in menu" :key="item.name" @tap="onClick(item)">
				<view class="icon-wrap">
					<image :src="item.icon" class="menu-icon"></image>
				</view>
				<text class="menu-name">{{ item.name }}</text>
				<text class="arrow">›</text>
			</view>
		</view>
	</view>
</template>


<script setup>
import sheep from "@/sheep";

const menu = [
	{
		name: '安全设置',
		icon: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/0534ccc09bb86347ec92c438c280ad3013image.png',
		path: '/pages/index/tips'
	},
	{
		name: '通知',
		icon: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/05390f43bf9b554cd681e7c86482dac45cimage.png',
		path: '/pages/index/tips'
	},
	{
		name: '语言',
		icon: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/05af55f55979b9432fbbda38203f4113c0image.png',
		path: '/pages/help/tips'
	},
	{
		name: '隐私',
		icon: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/0534ccc09bb86347ec92c438c280ad3013image.png',
		path: '/pages/index/tips'
	},
	{
		name: '版本',
		icon: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/05390f43bf9b554cd681e7c86482dac45cimage.png',
		path: '/pages/index/tips'
	},
	{
		name: '退出登录',
		icon: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/0566397fd91ff9455893ee94903334798dimage.png',
		path: '/pages/help/tips'
	},
	{
		name: '注销账号',
		icon: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/05f688b889538a4248813f567e0288fc71image.png',
		path: '/pages/help/tips'
	},
]

const onClick = (item) => {
	if (item.name == '退出登录') {
		uni.clearStorage()
		uni.navigateTo({
			url: '/pages/index/login'
		})
	}
}
</script>


<style scoped lang="scss">
.profile-page {
	background: #fff;
	min-height: 100vh;
	padding: 60rpx;
}

.header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 30rpx;
	margin-bottom: 40rpx;

	.back-icon,
	.setting-icon {
		font-size: 32rpx;
		color: #333;
	}

	.title {
		font-size: 34rpx;
		font-weight: bold;
	}
}

.user-card {
	background: #fff0f5;
	border-radius: 40rpx;
	padding: 30rpx;
	display: flex;
	align-items: center;
	position: relative;

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}

	.user-info {
		display: flex;
		flex-direction: column;

		.name {
			font-size: 35rpx;
			font-weight: bold;
			color: #333;
		}

		.desc {
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #999;
		}
	}

	.edit-icon {
		position: absolute;
		right: 30rpx;
		font-size: 32rpx;
		color: #aaa;
	}
}

.user-id {
	margin-top: 40rpx;
	margin-left: 20rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #000;
}

.menu-list {
	margin-top: 40rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;

	.menu-item {
		display: flex;
		align-items: center;
		border: 1px solid #fff0f5;
		padding: 40rpx;
		border-radius: 40rpx;
		position: relative;

		.icon-wrap {
			width: 60rpx;
			height: 60rpx;
			background: #ffe4ec;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 20rpx;
		}

		.menu-icon {
			width: 36rpx;
			height: 36rpx;
		}

		.menu-name {
			font-size: 28rpx;
			color: #333;
			flex: 1;
		}

		.arrow {
			font-size: 32rpx;
			color: #aaa;
		}
	}
}
</style>
